<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">销售额</div>
          </div>
          <div class="analysis-chart-card-num">¥ {{totalData.sale_money}}</div>
          <div class="analysis-chart-card-content" style="padding-top: 18px;">
          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">成交客户数</div>
            <!--<el-tag size="mini"></el-tag>-->
          </div>
          <div class="analysis-chart-card-num">{{totalData.sale_num}}</div>
          <div class="analysis-chart-card-content">

          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">订单总数</div>
            <!--<el-tag size="mini" type="danger"></el-tag>-->
          </div>
          <div class="analysis-chart-card-num">{{totalData.completed_order}}</div>
          <div class="analysis-chart-card-content">

          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">店铺总数</div>
            <!--<el-tag size="mini"></el-tag>-->
          </div>
          <div class="analysis-chart-card-num">{{totalData.shop_num}}</div>
          <div class="analysis-chart-card-content">

          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">昨日推广花费</div>
            <!--<el-tag size="mini"></el-tag>-->
          </div>
          <div class="analysis-chart-card-num">{{totalData.tg_money}}</div>
          <div class="analysis-chart-card-content">

          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12">
        <el-card class="analysis-chart-card" shadow="never">
          <div slot="header" class="ele-cell">
            <div class="ele-cell-content">昨日退款总额</div>
            <!--<el-tag size="mini"></el-tag>-->
          </div>
          <div class="analysis-chart-card-num">{{totalData.refund_money}}</div>
          <div class="analysis-chart-card-content">

          </div>
          <el-divider/>
          <div class="analysis-chart-card-text"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 销售额、访问量 -->
    <el-card shadow="never" body-style="padding: 0;">
      <div class="ele-cell demo-monitor-tool">
        <div class="ele-cell-content">
          <el-tabs
            v-model="saleSearch.type"
            class="demo-monitor-tabs">
            <el-tab-pane label="销售额" name="saleroom"/>
          </el-tabs>
        </div>
        <div class="ele-inline-block hidden-xs-only">
          <el-radio-group v-model="saleSearch.dateType" size="small" @change="getSaleroomData">
            <el-radio-button :label="1">最近七天</el-radio-button>
            <el-radio-button :label="2">本月</el-radio-button>
            <el-radio-button :label="3">本年</el-radio-button>
          </el-radio-group>
        </div>
        <!--
        <div class="ele-inline-block hidden-sm-and-down" style="width: 260px;">
          <el-date-picker
            unlink-panels
            type="daterange"
            class="ele-fluid"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            v-model="saleSearch.datetime"
            range-separator="至" size="small"/>
        </div>
        -->
      </div>
      <el-divider/>
      <el-row>
        <el-col :lg="24" :md="24">
          <div class="demo-monitor-title">
            销售趋势
          </div>
          <ele-chart
            ref="saleChart"
            style="height: 285px;"
            :option="saleChartOption"/>
        </el-col>
        <!--
        <el-col :lg="6" :md="8">
          <div class="demo-monitor-title">
            门店销售额排名
          </div>
          <div
            v-for="(item, index) in saleroomRankData"
            :key="index"
            class="demo-monitor-rank-item ele-cell">
            <el-tag
              size="mini"
              type="info"
              :effect="index < 3 ? 'dark' : 'light'"
              :color="index < 3 ? '#314659' : 'hsla(0, 0%, 60%, .2)'"
              style="border-color: transparent;"
              class="ele-tag-round">
              {{ index + 1 }}
            </el-tag>
            <div class="ele-cell-content">{{ item.name }}</div>
            <div class="ele-text-secondary">{{ item.value }}</div>
          </div>
        </el-col>
        -->
      </el-row>
    </el-card>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart},
  data() {
    return {
      // 销售量搜索参数
      saleSearch: {
        type: 'saleroom',
        dateType: 3,
        datetime: ''
      },
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      //头部统计
      totalData: [],
    };
  },
  computed: {
    // 销售额柱状图配置
    saleChartOption() {
      return {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: this.saleroomData.map(d => d.key)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            data: this.saleroomData.map(d => d.value)
          }
        ]
      };
    }
  },
  mounted() {
    this.getSaleroomData();
    this.getSaleTotal();
  },
  methods: {
    /* 获取销售量数据 */
    getSaleroomData() {
      this.$http
        .get("/analysis/saleRoomData", {params: this.saleSearch})
        .then((res) => {
          if (res.data.code === 0) {
            this.saleroomData = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })
      // this.saleroomRankData = [
      //   {name: '深圳路 1 号店', value: '124,643'},
      //   {name: '广州路 2 号店', value: '456,465'},
      //   {name: '厦门路 3 号店', value: '776,679'},
      //   {name: '福州路 4 号店', value: '456,658'},
      //   {name: '北京路 5 号店', value: '245,466'},
      //   {name: '上号路 6 号店', value: '887,344'},
      //   {name: '南京路 7 号店', value: '897,233'}
      // ];
    },
    getSaleTotal() {
      this.$http
        .get("/analysis/saleTotal", {params: this.saleSearch})
        .then((res) => {
          if (res.data.code === 0) {
            this.totalData = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
  },
  activated() {
    ['saleChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped>
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
